<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/public/css.css">
    <style>
        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: initial;
            height: initial;
            /* background: linear-gradient(91deg, #f1eefc, #9dc6ff 70%, #a5bcff); */
            /* （body背景色） */
            /* background: linear-gradient(135deg, #56c8ff, #6f99fc) no-repeat; */
            /* （button背景色） */
            /* background: black; */
        }

        .setBox {
            width: 200px;
            height: 200px;
            /* background: cadetblue; */
            background: linear-gradient(to right, #bb313e25, #bb313e25, #d7222925, #dd4a1625, #e4761525, #f5c50025, #f0e92725, #b1ce2425, #48a93525, #03944525, #157c4f25, #176a5825, #1b556325, #1d386f25, #1d386f25, #20277825, #52266325, #8a244b25);
            border-radius: 50%;
            position: fixed;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .setBox input {
            border: 0;
            outline: none;
            border-radius: 0.2rem;
            height: 20px;
            padding-left: 5px;
            /* color: black; */
            -webkit-text-fill-color: transparent;
            background-image: -webkit-linear-gradient(left, #129835, #ece648 25%, #129835 50%, #F9E92B 75%, rgb(40, 150, 38));
            background-size: 200%, 100%;
            -webkit-background-clip: text;
            -webkit-animation: word 5s linear infinite;
        }

        @keyframes word {
            0% {
                background-position: 0 0
            }

            100% {
                background-position: -100% 0
            }
        }

        .getBox {
            position: fixed;
            /* width: 400px;
            height: 400px;
            background: rgba(245, 245, 245, 1); */
        }
    </style>
</head>

<body>
    <a target="_blank" href="http://sighttp.qq.com/authd?IDKEY=7d260b84f98f4f8b3cb4561392b593c2f222fc9ad9f9ecd7"><img
            border="0" src="http://wpa.qq.com/imgd?IDKEY=7d260b84f98f4f8b3cb4561392b593c2f222fc9ad9f9ecd7&pic=51"
            alt="点击这里给我发消息" title="点击这里给我发消息" /></a>
    <div class="setBox">
        <input type="text" class="boxInput" placeholder="输入16进制颜色">
    </div>
    <div class="getBox">
        <!-- <a href="javascript:;">究极无敌好看</a> -->
    </div>
    <ul>
        <li>
            {{each comments}}
            {{$value.name}}的年纪{{$value.age}}
            {{/each}}
        </li>
    </ul>
    <form action="pinglun" method="get">
        <div>
            <label for="name"></label>
            <input type="text" placeholder="" name="name">
        </div>
    </form>
</body>

<script>
    var obj = {};

    // function defineReact(obj, key, value) {
    Object.defineProperty(obj, 'value', {
        set: function (newValue) {
            console.log('触发setter')
            document.querySelector('.getBox').innerHTML = newValue
        },
        get: function () {
            console.log('触发getter')
            return value
        }
    })
    // }

    document.querySelector('.boxInput').addEventListener('keyup', function (e) {
        obj.value = e.target.value
    })

</script>
<script>
    function move(tagName) {
        // 做输入判断
        let box = document.querySelector(tagName);
        if (!box) {
            alert('请填写正确的标签名')
            return
        }

        // 做缓存
        if (localStorage.getItem(tagName)) {
            getCache = JSON.parse(localStorage.getItem(tagName))
            console.log(getCache)
            box.style.left = getCache.left
            box.style.top = getCache.top
        }

        // 拖动
        box.onmousedown = function (e) {
            let disx = e.pageX - box.offsetLeft;
            let disy = e.pageY - box.offsetTop;
            console.log(disx)
            document.onmousemove = function (e) {
                box.style.left = e.pageX - disx + 'px';
                box.style.top = e.pageY - disy + 'px';
                localStorage.setItem(tagName, JSON.stringify({ left: e.pageX - disx + 'px', top: e.pageY - disy + 'px' }))
            }
            //释放鼠标按钮，将事件清空，否则始终会跟着鼠标移动
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            }
        }
    }
    move('.setBox')
    move('.getBox')

    window.onload = function () {
        //定义点击出现文字类
        function ClickFrontShow() {
            //定义所需文字和颜色
            this.fron = ['❤', '💚', '💙', '🧡', '💛', '💜', '🤎', '🖤', '🤍', '💔'];
            this.colo = ['#FF69B4', '#ff6651', 'orange', '#FF00FF', '#00FF7F', '#00BFFF', '#BA55D3'];
            //获取body元素
            this.elBody = document.getElementsByTagName("body")[0];
            //初始化randomNum
            this.randomNum = null;
            //初始化字体inde
            this.finde = 0;
            //初始化className
            this.cls = 0;
        }

        //定义初始化
        ClickFrontShow.prototype.init = function (frontArray, colorArray) {
            //自定义颜色和字体
            this.fron = frontArray || this.fron;
            this.colo = colorArray || this.colo;

            this.listenMouse();
        }

        //创建文字 
        ClickFrontShow.prototype.createFront = function (classname) {
            var self = this;
            let ospan = document.createElement('span');
            //设置样式
            let cssText = "position:absolute; width: 40px; height: 20px; cursor: default; transform: translate(-50%,-50%); font-weight: bold; opacity: 1; z-index: 1000; transition: 1s;";
            //随机字体和颜色
            let randomFront = self.fron[self.finde];
            let randomColor = self.colo[Math.round(Math.random() * (self.colo.length - 1))];
            //字体下标增1
            self.finde = (self.finde + 1) % self.fron.length;
            //向body中添加元素
            self.elBody.appendChild(ospan);
            //绑定一个classname
            ospan.className = String(classname);
            //添加样式
            ospan.style.cssText = cssText + "-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"
            ospan.style.color = randomColor;
            ospan.innerHTML = randomFront;
        }


        //监听鼠标点击
        ClickFrontShow.prototype.listenMouse = function () {
            var self = this;

            //鼠标点击事件
            document.onclick = function (e) {
                //避免classname值重复导致出现bug
                if (self.cls === 20) {
                    self.cls = 0;
                } else {
                    self.cls += 1;
                }
                //创建文字
                self.createFront(self.cls);
                let el = document.getElementsByClassName(self.cls)[0];

                //鼠标点击位置
                el.style.left = e.clientX + 'px';
                el.style.top = e.clientY + 'px';

                //过时改变
                setTimeout(function () {
                    el.style.opacity = 0;
                    el.style.top = el.offsetTop - 100 + 'px';
                }, 100);
                //过时清除
                setTimeout(function () {
                    self.elBody.removeChild(el);
                }, 2000);
            }

        }

        //实例化
        var frontShow = new ClickFrontShow();
        //用户可在此传递参数，默认第一个参数是字体数组；
        //第二个参数是颜色数组，必须是数组类型！
        frontShow.init();
    }





</script>

</html>
